class Magnifier{
  constructor(options){
    //原图的盒子
    this.sm_img = $(options.sm_img)
    //焦点框
    this.focus = $(options.focus)
    //大图片的盒子
    this.big_content = $(options.big_content)
    //大图片
    this.big_img = $(options.big_img)
    //放大镜最外面包裹的盒子
    this.el = $(options.el)
    //商品列表元素
    this.list = $(options.list)
    //商品元素
    this.list_item = $(options.list_item)

    //设置放大比例
    this.scale = 0.8;

    //边界元素
    this.boundary = {
      x :{
        min : 0,
        max :this.sm_img.width() - this.focus.width()
      },
      y :{
        min : 0,
        max :this.sm_img.height() - this.focus.height()
      }
    }
    
    this.init()
    this.bindEvent();
  }
  init(){
    this.focus.width( this.scale * this.sm_img.width() )
    this.focus.height( this.scale * this.sm_img.height() )

    this.big_content.width( this.scale * this.big_img.width() )
    this.big_content.height( this.scale * this.big_img.height() )
  }
  bindEvent(){
    //鼠标移入
    this.sm_img.on('mouseenter', () =>{
      this.show()
    })
    //鼠标移出
    this.sm_img.on('mouseleave', () =>{
      this.hide()
    })
    //鼠标移动
    this.sm_img.on('mousemove',(e) =>{
      this.move(e.pageX, e.pageY)
    })

    this.list_item.each((index,item) =>{
      $(item).on('click',() =>{
        this.sm_img.find('img').attr('src',$(item).find('img').attr('src'))
      })
    })
  }

  show(){
    this.focus.css('display','block')
    this.big_content.css('display','block')
  }

  hide(){
    this.focus.css('display','none')
    this.big_content.css('display','none')
  }
  move(x,y){
    x = x - this.el.offset().left - this.focus.width()/2 ;
    y = y - this.el.offset().top - this.focus.height()/2 ;

    x = x >= this.boundary.x.max ? this.boundary.x.max : x;
    x = x <= this.boundary.x.min ? this.boundary.x.min : x;

    y = y >= this.boundary.y.max ? this.boundary.y.max : y;
    y = y <= this.boundary.y.min ? this.boundary.y.min : y;


    this.focus.css({
      left : x + 'px',
      top : y
    })

    this.big_img.css({
      left : - this.big_img.width()/this.sm_img.width() * this.big_content.width() +'px',
      top : - this.big_img.height()/this.sm_img.height() * this.big_content.height() +'px',

    })
  }
}